<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
			}

			/*非常重要的样式让背景图片100%适应整个屏幕*/
			.bg {
				display: table;
				width: 100%;
				height: 50%;
				padding: 100px 0;
				text-align: center;
				color: #fff;
				background: url(images/640.webp) no-repeat bottom center;
				background-color: #000;
				background-size: cover;
			}

			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}

			ul:first-child a,
			.navbar-brand {
				background: transparent !important;
				color: #fff
			}

			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}

			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}

			/*-webkit-transition ;-moz-transition*/
			.top-nav {
				padding: 0;
				background: #000;
			}

			button.navbar-toggle {
				background-color: #fbfbfb;
			}

			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}

			.navbar {
				padding-left: 40px;
			}

			.dropdown-toggle,
			.glyphicon-off {
				color: white;
				font-size: 15px;
			}

			/* .dropdown {
				margin-left: 600px;
			} */

			.dropdown-toggle:hover {
				color: white;
			}

			.alert-warning {
				height: 130px;
				margin-top: 20px;
			}

			.btn-danger,
			.btn-default {
				width: 100px;
			}

			.table1 {
				border: 2px solid #f5f5f5;
				border-radius: 5px;
				padding: 0;

			}

			.table1 h4 {
				height: 40px;
				background: #f5f5f5;
				margin: 0;
				line-height: 40px;
				padding-left: 10px;

			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-fixed-top my-navbar" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

						<span class="glyphicon glyphicon-list"></span>

					</button>
					<a class="navbar-brand" href="#">重庆工程学院</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav" style="padding:-10px;">
						<li class=""><a href="#" class="glyphicon glyphicon-home" style="color: #45bcf9">&nbsp后台首页</a></li>
						<li><a href="usermanage.html" class="glyphicon glyphicon-user">&nbsp用户管理</a></li>
						<li><a href="contentmanage.html" class="glyphicon glyphicon-list-alt">&nbsp内容管理</a></li>
						<li><a href="#" class="glyphicon glyphicon-tags">&nbsp便签的管理</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right" style="padding-right: 60px ;padding-top: 10px;">
						<div class="dropdown">
							<span class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="username"></span>	
								<span class="caret"></span>
							</span>
							<ul class="dropdown-menu">
								<li>
									<a href="#" class="glyphicon glyphicon-home">&nbsp;前台首页</a>
								</li>
								<li>
									<a href="personalpage.html" class="glyphicon glyphicon-user">&nbsp;个人主页</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-cog">&nbsp;个人设置</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-credit-card">&nbsp;账户中心</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-heart">&nbsp;我的收藏</a>
								</li>


							</ul>
							<li class="glyphicon glyphicon-off out"><a href="login.html" style="color: white;">退出</a></li>





					</ul>
				</div>
			</div>
		</nav>
		<div class="bg"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="alert alert-warning fade in">
						<a href="#" class="close" data-dismiss="alert">
							&times;
						</a>
						<h4>网站有漏洞，急需修复！</h4>
						<p>当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即可修复!</p>
						<p>
							<button type="button" class="btn btn-danger">立即修复</button>
							<button type="button" class="btn btn-default" data-dismiss="alert">稍后处理</button>
						</p>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								网站数据统计
							</h3>
						</div>
						<div class="panel-body">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>统计项目</th>
										<th>昨日</th>
										<th>今日</th>
									</tr>
								</thead>
								<tbody>


								</tbody>
							</table>
						</div>
					</div>

				</div>

				<div class="col col-md-6 col-sm-12">

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								网站热帖
							</h3>
						</div>
						<ul class="list-group  list1">


						</ul>

					</div>
				</div>

				<div class="col col-md-6">

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								今日访客统计
							</h3>
						</div>
						<div class="panel-body" style="height: 310px;">
							<div id="main" class="col-md-12" style="height:100%;"></div>
						</div>
					</div>
				</div>
				<div class="col col-md-6 col-sm-12">

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								服务器状态
							</h3>
						</div>
						<div class="panel-body panel1">

						</div>
					</div>
				</div>


				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								团队留言板
							</h3>
						</div>
						<div class="panel-body">
							<div class="col-md-7">
								<div class="row pre-scrollable" style="margin-top: 50px;">
									<div class="media well">
										<div class="media-left">
											<img src="images/2.gif" class="media-object" style="width:60px">
										</div>
										<div class="media-body">

											<h4 class="media-heading">卓大哥</h4>
											<p>技术大哥，今晚请把网站程序升级一下哈， 现在的系统有漏洞，安全起见!
											</p>
										</div>
									</div>
									<div class="media well">
										<div class="media-body text-right">
											<h4 class="media-heading">技术大哥</h4>
											<p>收到，今晚凌晨2点准时升级</p>
										</div>
										<div class="media-right">
											<img src="images/1.gif" class="media-object" style="width:60px">
										</div>
									</div>
									<div class="media well">
										<div class="media-body text-right">
											<h4 class="media-heading">技术大哥</h4>
											<p>你先在站点发布一下通知哈!</p>
										</div>
										<div class="media-right">
											<img src="images/1.gif" class="media-object" style="width:60px">
										</div>
									</div>
									<div class="media well">
										<div class="media-left">
											<img src="images/2.gif" class="media-object" style="width:60px">
										</div>
										<div class="media-body">
											<h4 class="media-heading">卓大哥</h4>
											<p>好嘞。</p>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-5">

								<form action="" method="">
									<lable for="text">请输入留言内容</lable>
									<textarea rows="5" cols="10" id="text" class="form-control">

									</textarea>
									<button type="button" class="btn btn-default message" style="margin-top: 10px;">留言</button>


								</form>
								<div class="panel panel-default" style="margin-top: 10px;">
									<div class="panel-heading">
										<h3 class="panel-title">
											团队联系手册
										</h3>
									</div>
									<div class="panel-body">
										<ul class="list-group">
											<li class="list-group-item">站长(李小龙)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13124912345</li>
											<li class="list-group-item">技术(大牛哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13124912345</li>
											<li class="list-group-item">推广(张二哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13124912345</li>
											<li class="list-group-item">客服(王女士)：<span class="glyphicon glyphicon-phone"></span>&nbsp;13124912345 &nbsp;<span
												 class="glyphicon glyphicon-phone-alt"></span>&nbsp;023-333333</li>

										</ul>

									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<footer>
					<div class="row">
						<div class="col-md-12 text-center navbar-static-bottom" style="margin-top: 30PX;">
							Copyright @ 2019-2020

						</div>
					</div>
				</footer>




	</body>
</html>
<script>
	$(window).scroll(function() {
		if ($(".navbar").offset().top > 50) {
			$(".navbar-fixed-top").addClass("top-nav");
		} else {
			$(".navbar-fixed-top").removeClass("top-nav");
		}
	})


	function ajax() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData`, //发送的地址
			// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
			success: function(msg) { //成功的回调
				var data = msg.data
				for (var i = 0; i < data.length; i++) {
					$('.table-hover tbody').append('<tr><th>' + data[i].activ + '</th><td>' + data[i].yestoday + '</td><td>' + data[
						i].today + '</td></tr>')
				}



			},
			error: function(error) {
				console.log(error.responseText);
			}
		});
	}

	ajax();


	function ajax2() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getTie`, //发送的地址
			// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
			success: function(msg) { //成功的回调
				var data = msg.data
				for (var i = 0; i < data.length; i++) {
					$('.list1').append(
						`<li class="list-group-item">
									<a href=""><span class="glyphicon glyphicon-list-alt">&nbsp${data[i].news}</span><small class='pull-right'>${data[i].date}</small></a>
								</li>`
					)
				}

				for (var j = 0; j < data.length - 2; j++) {
					$('.panel1').append(
						`<p>内存使用率：${data[j].status}</p>
											<div class="progress progress-striped">
											    <div class="progress-bar ${data[j].class}" role="progressbar"
											         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
											         style="width: ${data[j].status};">
											        <span class="sr-only">90% 完成（成功）</span>
											    </div>
											</div>`
					)
				}



			},
			error: function(error) {
				console.log(error.responseText);
			}
		});
	}

	ajax2();

	function ajax3() {
		$.ajax({
			type: "get", //发送请求的类型post，get
			dataType: "json", //默认是text
			url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getData`, //发送的地址
			// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
			success: function(msg) { //成功的回调
				var data = msg.data
				console.log(data.series)
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},

					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [],

				};
				option.series = data.series
				myChart.setOption(option);



			},
			error: function(error) {
				console.log(error.responseText);
			}
		});
	}

	ajax3();

	$('.message').click(function() {

		$('.well:last').clone().insertAfter($('.well:last')).find('p').text($('textarea').val())


	})
	$('.username').text(localStorage.getItem('name'))
	$('.out').click(function(){
		localStorage.removeItem('name')
	})
</script>

